<template>
  <div class="message">
    <div hidden id="DivSelect">
      <el-select class="select" v-model="selectDate" @change="initFrame()">
        <el-option
          v-for="item in options_selectDate"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select class="select" v-model="selectDistrict" placeholder="请选择小区" @change="initFrame()">
        <el-option
          v-for="item in options_selectDistrict"
          :key="item.CLIENT_NO"
          :label="item.CLIENT_NAME"
          :value="item.CLIENT_NO"
        ></el-option>
      </el-select>
    </div>
    <iframe id="mainFrame" src="http://111.160.78.62:9936/indexDistrict.html" frameborder="0"></iframe>
    <!-- <div id="imageShow">
      <img border="0" src="../../assets/images/餐厨区级.png" alt="Pulpit rock" height="85%" />
    </div>-->
  </div>
</template>

<script>
export default {
  data () {
    return {
      options_selectDate: [{
        value: '上月',
        label: '上月'
      }, {
        value: '本月',
        label: '本月'
      }],
      options_selectDistrict: [],
      selectDate: '上月',
      selectDistrict: ''
    }
  },
  created () {
    this.initLoad()
    this.loadSelectionDistrict()
  },
  methods: {
    initLoad () {
      setTimeout(() => {
        var cod = localStorage.getItem('codes')
        this.selectDistrict = cod
        if (cod === '0000019' || cod === '00000') {
          document.getElementById('DivSelect').removeAttribute('hidden', true)
        }
        var url = 'http://111.160.78.62:9936/indexDistrict.html?ClientNo=' + cod + '&DataType=上月'
        document.getElementById('mainFrame').src = url
      }, 100)
    },
    initFrame () {
      var codSelect = this.selectDistrict
      var url = 'http://111.160.78.62:9936/indexDistrict.html?ClientNo=' + codSelect + '&DataType=' + this.selectDate
      console.log('1' + url)
      document.getElementById('mainFrame').src = url
    },
    async loadSelectionDistrict () {
      var cod = localStorage.getItem('codes')
      // if (cod === '0000019') {
      //   cod = '000000019'
      // }
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetStaticsGroupApi?ClientNo=' + cod)
      this.options_selectDistrict = data.filter(item => {
        return item
      })
    }
  }
}
</script>

<style>
body {
  background: #041432;
}
.message,
iframe {
  width: 100%;
  height: 90%;
}
.select {
  margin-top: 15px;
  margin-left: 15px;
}
.el-select-dropdown__item {
  font-weight: bold;
  font-size: 16px!important;
}
.el-input__inner {
  font-weight: bold;
  font-size: 16px!important;
}
</style>
